    import { react, useState, useRef } from "react";
    import { useDispatch ,useSelector } from "react-redux";
    import store from '../store'
    import { add } from '../store/reducer' 


    // 单向数据流
    export default function Demo1(props) {
        const dispatch = useDispatch(); 

        // const list = useSelector(state => state.list)
        // console.log(list);

    

        let [data, setData] = useState([])
        function addData() { 
            dispatch(add({ name: 'zhangsan', age: 18 }))   //调用dispatch 返回一个对象 其中数据得字段叫做payload
        }

        function getData() { 
            
            const data = store.getState().list
            setData(data)



        }

        return (
            <div>
                <h1>Demo1</h1>
                <button onClick={addData}>添加</button>
                <button onClick={getData}>获取</button>
                <ul>
                    {
                        data.map((item, index) => {
                            return <li key={index}>{item.name}</li>
                        })
                    }
                </ul>
            </div>
        )
    }

